<script setup>
import { useVModel } from "@/utils/useVModel";
const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);
const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	const entries = Object.entries(formRef.value.$.exposed);
	for (const [key, value] of entries) {
		instance.exposed[key] = value;
	}
});
defineExpose({ ...instance.exposed });

const rules = ref({
	name: [{ required: true, message: "请输入账号名称", trigger: "change" }],
});
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="120px" ref="formRef">
		<el-form-item label="角色名称" prop="name">
			<el-input v-model="model.name" />
		</el-form-item>
		<el-form-item label="排序" prop="sort">
			<el-input v-model="model.sort" />
		</el-form-item>
		<el-form-item label="备注">
			<el-input v-model="model.note" />
		</el-form-item>
	</el-form>
</template>
